<template>
    <div id="Title" v-show="isTitleShow" :style="`background-color:`+subjectColor+`;`+`font-size:`+subjectFont+';'" :class="isDark == true?'Dark':' '">
        <div class="Title-left">
            <i class="el-icon-user" @click="isLogin? ForPerson(): drawerForLogin = true"></i>
        </div>
        <div class="Title-mid" @click="toIndex"><!--@click="drawerForPerson = true"-->
            <span>新闻</span>
        </div>
        <div class="Title-right">
            <i class="el-icon-search" @click="toSearch"></i>
            <i class="el-icon-setting" @click="drawerForConfig = true"></i>
        </div>
        <el-drawer
            :visible.sync="drawerForConfig"
            :direction="direction"
            size="80%"
            :class="isDark === true?'dark':' '"
            :append-to-body=true
            >
            <Config/>
        </el-drawer>
        <el-drawer
            :visible.sync="drawerForLogin"
            :direction="direction"
            size="80%"
            :class="isDark === true?'dark':' '"
            :append-to-body=true
            >
            <LoginOrResgin/>
        </el-drawer>
    </div>
</template>

<script>
import Config from './Config.vue'
import LoginOrResgin from './Person/LoginOrResign.vue'
import {mapState} from 'vuex'
export default {
    name:'Title',
    components:{
        Config,
        LoginOrResgin,
    },
    mounted(){
        this.$bus.$on('closeLoginOrResign',(data)=>{
            this.drawerForLogin = data
        })
        this.$bus.$on('successLogin',(data)=>{
            this.isLogin = data
        })
    },
    data() {
        return {
            drawerForLogin:false,
            isTitleShow:true,
            drawerForConfig: false,
            direction: 'ltr',
            isLogin:false
        }
    },
    computed:{
        ...mapState(['subjectColor','subjectFont','isDark']),
    },
    methods: {
        ForPerson(){
            this.drawerForPerson = false
            
            this.$router.push('/person')
        },
        toIndex(){
            this.$router.push('/')
        },
        toSearch(){
            this.$router.push('/search')
        }
    },

}
</script>

<style scoped lang="less">
    #Title{
        z-index: 999;
        position: fixed;
        top:0px;
        width: 100%;
        height: 3rem;
        background-color: red;
        // z-index: 1;
        div{
            display: flex;
            justify-content: center;
            flex-flow: row wrap;
            align-items: center;
        }
        .Title-left,.Title-right{
            width: 20%;
            height: 100%;
            float: left;
            i{
                display: inline-block;
                margin-right: 10px;
            }
        }
        .Title-right{
            justify-content: space-around;
        }
        .Title-left{
            justify-content: start;
            i{
                display: inline-block;
                margin-left: 10px;
            }
        }
        .Title-mid{
            width: 60%;
            height: 100%;
            float: left;
            span{
                color: #fff;
            }
        }
        i{
            font-size: 1.7rem;
            color:#fff;
        }
    }
    .dark{
        /deep/.el-drawer{
        background-color: rgb(52,55,64);
        color: #fff;
        }
    }
    .Dark{
        background-color: rgb(52,55,64)!important;
    }
    /deep/.el-drawer__header{
        margin-bottom: 0!important;
    }
    /deep/.el-drawer__body{
        overflow: hidden!important;
    }
    .Personnal{
        /deep/.el-drawer__header{
            margin-bottom: 0!important;
            position: absolute;
            width: 260px;
            z-index: 111;
        }
    }
</style>